'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Icon } from '@iconify/react'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { useRouter } from 'next/navigation'

import { loginWithGitee, loginWithGithub, loginWithEmail } from './action'
import { useToast } from '@/components/ui/use-toast'

const loginFormSchema = z.object({
  email: z.string().email({
    message: '无效的邮箱格式',
  }),
  password: z.string().min(1, {
    message: '不能为空',
  }),
})

export type loginFormSchemaType = z.infer<typeof loginFormSchema>

export default function LoginPage() {
  const router = useRouter()
  const { toast } = useToast()
  const form = useForm<loginFormSchemaType>({
    resolver: zodResolver(loginFormSchema),
    defaultValues: {
      email: '',
      password: '',
    },
  })

  // 自定义事件
  async function onSubmitHnanlder(values: loginFormSchemaType) {
    const result = await loginWithEmail(values)
    if (result?.error) {
      toast({
        title: '登陆失败',
        description: result.error,
        variant: 'destructive',
      })
    }
  }

  return (
    <div className="flex h-screen justify-center items-center py-[100px] ">
      <Form {...form}>
        <div>
          <form
            onSubmit={form.handleSubmit(onSubmitHnanlder)}
            className="p-[20px] w-[420px] "
          >
            <div className="flex justify-center items-center my-5">
              <h1 className="text-2xl font-bold text-black">登陆</h1>
            </div>
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>邮箱</FormLabel>
                  <FormControl>
                    <Input {...field} placeholder="请输入邮箱..."></Input>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem className="mt-[20px]">
                  <FormLabel>密码</FormLabel>
                  <FormControl>
                    <Input
                      type="password"
                      {...field}
                      placeholder="请输入密码..."
                    />
                  </FormControl>
                </FormItem>
              )}
            />
            <div className="flex justify-between mt-[20px]">
              <Button size="lg" className="w-full btn-hover " type="submit">
                登录
              </Button>
            </div>
            <Separator className="my-4 bg-gray-950 dark:bg-white" />
            <div
              className="flex items-center justify-start gap-2 mb-3 text-sm text-black cursor-pointer hover:text-gray-500  dark:text-white dark:hover:text-gray-300     "
              onClick={() => {
                router.push('/auth/register')
              }}
            >
              还没账号?立即免费注册
            </div>
            <div className="flex flex-col gap-3">
              <div className="flex gap-2 ">
                <Button
                  onClick={() => loginWithGithub()}
                  variant="secondary"
                  size="lg"
                  type="button"
                  className="px-0 flex-1 flex justify-center gap-1  btn-hover"
                >
                  <Icon icon="octicon:mark-github-16"></Icon>
                  Github登陆
                </Button>
                <Button
                  onClick={() => loginWithGitee()}
                  variant="secondary"
                  size="lg"
                  type="button"
                  className="px-0 flex-1 flex justify-center gap-1 btn-hover "
                >
                  <Icon icon="simple-icons:gitee"></Icon>
                  GItee登陆
                </Button>
              </div>
            </div>
          </form>
        </div>
      </Form>
    </div>
  )
}
